<template>
	<view class="record-page">
		<!-- 标签切换栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: selectedTab === 'coin' }" @click="selectedTab = 'coin'">
				<text>投币记录</text>
				<view class="tab-underline" v-if="selectedTab === 'coin'"></view>
			</view>
			<view class="tab-item" :class="{ active: selectedTab === 'reward' }" @click="selectedTab = 'reward'">
				<text>奖励记录</text>
				<view class="tab-underline" v-if="selectedTab === 'reward'"></view>
			</view>
		</view>

		<!-- 记录列表容器 -->
		<view class="record-list">
			<!-- 空状态提示 -->
			<view class="empty-state" v-if="records.length === 0 && !pagination.loading">
				<text>{{ selectedTab === 'coin' ? '暂无投币记录' : '暂无奖励记录' }}</text>
			</view>

			<!-- 统一的记录列表 -->
			<view class="card-wrapper" v-for="(item, index) in records" :key="index">
				<view class="record-item">
					<view class="record-header">
						<text class="record-time">{{ item.startTime }}</text>
						<text class="record-machine">机位：{{ item.stationNameStr }}</text>
					</view>

					<text class="record-rounds" v-if="item.roundCount">启动局数：{{ item.roundCount }}</text>

					<view class="record-footer">
						<text
							class="record-type">{{ selectedTab === 'coin' ? '扣币类型' : '奖励类型' }}：{{ item.payMethodTypeStr }}</text>
						<text class="record-amount" :class="selectedTab === 'coin' ? 'negative' : 'positive'">
							{{ selectedTab === 'coin' ? '' : '+' }}{{ item.quantity }}
						</text>
					</view>
				</view>
			</view>

			<!-- 分页加载组件 -->
			<uni-load-more id="loadMoreElement"
				:status="!hasMore ? 'noMore' : (pagination.loading ? 'loading' : 'more')" @clickLoadMore="loadMore"
				:content-text="{contentdown:'上拉加载更多',contentrefresh:'正在加载...',contentnomore:'没有更多数据了'}"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选中的标签（coin：投币记录，reward：奖励记录）
				selectedTab: 'coin',
				// 统一的记录数据数组
				records: [],
				// 分页相关状态
				pagination: {
					current: 1, // 当前页码
					pageSize: 10, // 每页数量
					total: 0, // 总记录数
					pages: 0, // 总页数
					loading: false // 加载状态
				},
				hasMore: true // 是否有更多数据
			};
		},

		watch: {
			// 监听标签切换，重新加载数据
			selectedTab: function(newVal) {
				this.resetPagination();
				this.loadRecords();
			}
		},

		onLoad() {
			// 页面加载时获取数据
			this.loadRecords();
		},

		onReady() {
			// 组件挂载完成后设置可见性监听
			this.setupVisibilityObserver();
		},

		onUnload() {
			// 页面卸载时销毁观察者，避免内存泄漏
			if (this.observer) {
				this.observer.disconnect();
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.remoteControlRecord')
			});
		},
		methods: {
			// 重置分页参数
			resetPagination() {
				this.pagination.current = 1;
				this.pagination.total = 0;
				this.pagination.pages = 0;
				this.hasMore = true;
				// 清空记录数据
				this.records = [];
			},

			// 加载记录数据
			async loadRecords() {
				// 如果已经没有更多数据或正在加载中，则不再请求
				if (!this.hasMore || this.pagination.loading) {
					return;
				}

				this.pagination.loading = true;

				try {
					// 准备请求参数
					const params = {
						current: this.pagination.current,
						pageSize: this.pagination.pageSize,
						sortField: '',
						sortOrder: '',
						operationType: this.selectedTab === 'coin' ? 1 : 2 // 1投币 2奖励
					};

					// 调用接口获取数据
					const response = await this.$http.post('/machineConsumptionRecord/getRemoteStartRecords', params, {
						showLoading: false,
					});

					if (response) {
						// 更新分页信息
						this.pagination.total = response.total;
						this.pagination.pages = response.pages;

						// 更新记录数据
						if (this.pagination.current === 1) {
							this.records = response.records || [];
						} else {
							this.records = [...this.records, ...(response.records || [])];
						}

						// 判断是否还有更多数据
						this.hasMore = this.pagination.current < this.pagination.pages;
					} else {
						// uni.showToast({
						//   title: response?.message || '获取记录失败',
						//   icon: 'none'
						// });
					}
				} catch (error) {
					console.error('获取远程启动记录失败:', error);
					// uni.showToast({
					//   title: error.message || '获取记录异常',
					//   icon: 'none'
					// });
				} finally {
					this.pagination.loading = false;
				}
			},

			// 设置可见性观察者
			setupVisibilityObserver() {
				try {
					// 使用IntersectionObserver API监听加载更多组件的可见性
					this.observer = uni.createIntersectionObserver(this);
					this.observer.relativeToViewport({
						bottom: 100
					});
					this.observer.observe('#loadMoreElement', (res) => {
						// 当元素可见且满足加载条件时触发加载
						if (res.intersectionRatio > 0 && this.hasMore && !this.pagination.loading) {
							this.loadMore()
						}
					});
				} catch (error) {
					console.error('设置可见性监听失败:', error);
				}
			},

			// 加载更多数据
			loadMore() {
				if (this.hasMore && !this.pagination.loading) {
					this.pagination.current++;
					this.loadRecords();
				}
			}
		}
	};
</script>

<style scoped>
	.record-page {
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 标签栏样式 */
	.tab-bar {
		display: flex;
		height: 50px;
		border-bottom: 1px solid #eeeeee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab-item text {
		font-size: 16px;
		color: #666666;
	}

	.tab-item.active text {
		color: #333333;
		font-weight: 500;
	}

	.tab-underline {
		width: 40px;
		height: 2px;
		background-color: #ff4d4f;
		position: absolute;
		bottom: 0;
	}

	/* 记录列表样式 */
	.record-list {
		margin-top: 5rpx;
		padding: 20rpx;
		overflow-y: auto;
		flex: 1;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		color: #999999;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	/* 卡片容器 */
	.card-wrapper {
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		border: 1px solid #e0e0e0;
		background-color: #ffffff;
	}

	/* 记录项样式 */
	.record-item {
		padding: 30rpx;
		background-color: #ffffff;
	}

	/* 头部信息 */
	.record-header {
		margin-bottom: 20rpx;
	}

	/* 时间样式 */
	.record-time {
		display: block;
		font-size: 30rpx;
		color: #333333;
		font-weight: 600;
		margin-bottom: 6rpx;
	}

	/* 机器信息 */
	.record-machine {
		display: block;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		align-self: flex-start;
	}

	/* 局数信息 */
	.record-rounds {
		display: block;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	/* 底部信息 */
	.record-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	/* 类型信息 */
	.record-type {
		font-size: 26rpx;
		color: #666666;
	}

	/* 金额样式 */
	.record-amount {
		font-size: 34rpx;
		font-weight: 600;
		display: inline-block;
	}

	/* 负数样式（投币） */
	.negative {
		color: #ff4d4f;
	}

	/* 正数样式（奖励） */
	.positive {
		color: #52c41a;
	}

	/* 标签样式增强 */
	.tab-bar {
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 加载更多组件样式 */
	.uni-load-more {
		padding: 40rpx 0;
	}
</style>